<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>菜鸟教程(runoob.com)</title>
  <style>
    /* 打开和关闭手风琴面板的样式 */
    .accordion {
      width: 100%;
      text-align: left;
      padding: 18px;
      color: #444;
      background-color: #eee;
      border: none;
      cursor: pointer;
      outline: none;
      transition: 0.4s;
    }

    /* 设置点击和鼠标移到选项上面时（悬停）的样式 */
    .active,
    .accordion:hover {
      background-color: #ccc;
    }

    /* 为手风琴面板设计样式。 默认隐藏 */
    .panel {
      padding: 0 18px;
      background-color: white;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.2s ease-out;
    }

    /* 设置 +、- 标志 */
    .accordion:after {
      content: '\002B';
      /* Unicode 字符 + 号 */
      color: #777;
      font-weight: bold;
      float: right;
      margin-left: 5px;
    }

    .active:after {
      content: "\2212";
      /* Unicode 字符 - 号 */
    }
  </style>
</head>

<body>

  <h2>手风琴动画</h2>
  <p>电脑按钮显示或隐藏内容</p>

  <button class="accordion">Runoob 1</button>
  <div class="panel">
    <p>菜鸟教程 -- 学的不仅是技术，更是梦想！！！</p>
  </div>

  <button class="accordion">Runoob 2</button>
  <div class="panel">
    <p>菜鸟教程 -- 学的不仅是技术，更是梦想！！！</p>
  </div>

  <button class="accordion">Runoob 3</button>
  <div class="panel">
    <p>菜鸟教程 -- 学的不仅是技术，更是梦想！！！</p>
  </div>

  <script>
    let acc = document.getElementsByClassName("accordion");
    let i;

    for (i = 0; i < acc.length; i++) {
      acc[i].addEventListener("click", function () {
        this.classList.toggle("active");
        var panel = this.nextElementSibling;
        if (panel.style.maxHeight) {
          panel.style.maxHeight = null;
        } else {
          panel.style.maxHeight = panel.scrollHeight + "px";
        }
      });
    }
  </script>

</body>

</html>